import React, {useEffect, useState} from 'react';
import {Link, useHistory} from "react-router-dom";
import {Modal,List, Button, Toast,PullToRefresh} from 'antd-mobile';

import Txt from "../../../components/txt/Txt";


import './customerList.less';
import man from '../../../libs/img/user/man.png';
import woman from '../../../libs/img/user/woman.png';
import http from "../../../model/http"; 
import Header from "../../../components/header/Header";


// import Vconsole from 'vconsole'
// const vConsole = new Vconsole()
let page = 1;
const h = document.documentElement.clientHeight - 40;

function UserList() { 

    // http://wxwork.gzsg.cn/wxwork/feedback/wxworkrecordCustomerList?userId=SG01016&hosId=1&managerId=1000920&
    //begintime=2022-03-20&endtime=2022-03-22&deptId=DPT20211110000007&erpId=S001000939&page=1&items=10
    
    const history = useHistory();
    const [list,setList] = useState([]);
    const [load,setLoad] = useState(false);
    const [listCount,setListCount] = useState(0)
    const getList = ()=>{
        (async ()=>{
        setLoad(true);
        const _list = await http.get('/feedback/wxworkrecordCustomerList',{
            // flag:history.location.state.flag, 
            begintime:history.location.state.begintime,
            endtime:history.location.state.endtime,
            deptId:history.location.state.dept_id,
            erpId:history.location.state.erp_id,
            page:page,
            items:10
        })
        setTimeout(()=>{setLoad(false)},800)
        setListCount(_list.allcount)
        if(!_list.data.length) return;
        page++;
        setList([...list,..._list.data]);
        })()
        
    }
    

    useEffect(()=>{  

    //   let data = [{"id":"20210404172257784000","customerName":"王睿","mzcode":"210402122","consultMan":"迟可欣","developer":"王何燕","age":"","sex":"1"},{"id":"20220321112012585000","customerName":"候应红","mzcode":"220312320","consultMan":null,"developer":"吴予柠","age":"","sex":"1"},{"id":"20200824095145265000","customerName":"姜丽萍","mzcode":"200810680","consultMan":"迟可欣","developer":"李子丽","age":"","sex":"1"},{"id":"20210811142739937000","customerName":"李小端","mzcode":"210803935","consultMan":"迟可欣","developer":"胡少琪","age":"","sex":"1"},{"id":"20220318000837503000","customerName":"何普普","mzcode":"220310763","consultMan":"迟可欣","developer":"何和明","age":"","sex":"1"},{"id":"20220226175413480000","customerName":"李小丽","mzcode":"220209897","consultMan":"迟可欣","developer":"史慧杰","age":"0","sex":"0"},{"id":"SGC00455024","customerName":"吴雨桐","mzcode":"00365677","consultMan":"迟可欣","developer":"谢培泳","age":"33","sex":"1"},{"id":"20220219154457354000","customerName":"廖海雯","mzcode":"220206711","consultMan":"迟可欣","developer":"吴予柠","age":"0","sex":"0"},{"id":"20160719131150361000","customerName":"周紫煊","mzcode":"160706338","consultMan":"迟可欣","developer":"郭云娟","age":"28","sex":"1"},{"id":"SGC00695183","customerName":"邹丽平","mzcode":"00550006","consultMan":"迟可欣","developer":"崔嘉嘉","age":"28","sex":"1"}]

    //   setList(data)

        list.length || getList();

        return ()=>{
        page=1
        }
        // eslint-disable-next-line
    },[])
      
    const toDeails=(item)=>{
        console.log("item".item)

       history.push(`/user/details?isBind=${1}&outUserId=${item.id}&entryIsHome=${1}`, {
        customerCrmId:item.customer_crm_id
       }); //跳转到客户详情页面
    }
    // const row = (rowData, sectionID, rowID) => {
    //     return (
    //         <div key={rowID} className='userList-row g-flex g-x-between g-mt32'
    //              onClick={toDeails.bind(this,rowData,outUserId,isBindOutUesr)}
    //              style={{padding: '0.25rem 0.2rem', backgroundColor: '#FFFFFF'}}>
    //                 <div className=' g-flex' >
    //                     <img src={rowData.sex=='1'?woman:man} style={{width:'1rem',height:'1rem'}} className='g-round' alt="UserImg"/>
    //                     <div className='g-ml20 g-f24 g-c-999'>
    //                         <p className='g-f30 g-c-333 '>
    //                             <span style={{fontSize:'0.32rem',fontWeight:'bold'}}>{rowData?.customerName}</span>
    //                         </p>
    //                         {/*<p className='g-f26 g-mt15'>顾客id：<span className='g-f24'>{rowData?.customerCrmId}</span></p>*/}
    //                         <p className='g-mt24'>卡号：<span>{rowData?.mzcode}</span></p>
    //                         <p className='g-mt12' style={{lineHeight:'0.4rem'}}>所属咨询：{rowData?.xcname}</p>
    //                         <p className='g-mt12' style={{lineHeight:'0.4rem'}}>开发人：{rowData?.dwname}</p>
    //                         {/*<p className='g-f30 g-mt10'> <span style={{ color: '#FF6E27' }}>{parseInt(rowID) +1}</span></p>*/}
    //                     </div>
    //                 </div>
    //         </div>
    //     );
    // };

    return (
        <div className='v-user-userHomeList'>
            <div className='body-background-div'></div>
            <PullToRefresh direction='up' onRefresh={getList} refreshing={load} style={{height:h, overflow:'auto'}}>
                 
                {list.map((item,idx)=>(
                    <div key={idx} className='userList-row g-flex g-x-between g-mt32'
                    onClick={toDeails.bind(this,item)}
                    style={{padding: '0.25rem 0.2rem', backgroundColor: '#FFFFFF'}}>
                        <div className='g-flex' >
                            <img src={item.sex=='1'?woman:man} style={{width:'1rem',height:'1rem'}} className='g-round' alt="UserImg"/>
                            <div className='g-ml20 g-f24 g-c-999'>
                                <p className='g-f30 g-c-333 '>
                                    <span style={{fontSize:'0.32rem',fontWeight:'bold'}}>{item?.customerName}</span>
                                </p> 
                                <p className='g-mt24'>卡号：<span>{item?.mzcode}</span></p>
                                <p className='g-mt12' style={{lineHeight:'0.4rem'}}>所属咨询：{item.consultMan?item.consultMan:'暂无'}</p>
                                <p className='g-mt12' style={{lineHeight:'0.4rem'}}>开发人：{item.developer?item.developer:'暂无'}</p> 
                            </div>
                        </div> 
                        
                    </div>
                    
                ))}
                {list.length >= listCount? <div className='test-color'>暂无更多数据</div> : ''}
            </PullToRefresh>
            
            <Header/>
            
            {
                // list.length>0&& (
                // <div style={{marginTop:'0.32rem'}}> 
                //     <ListView
                //         dataSource={dataSource}
                //         renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
                //             {
                //                 !hasMore?'加载完毕，没有更多数据了~':(
                //                     isLoading && 'Loading...'
                //                 )
                //             }
                //         </div>)}
                //         renderRow={row}
                //         useBodyScroll
                //         onEndReachedThreshold={100}
                //         onEndReached={onEndReached}
                //         pageSize={10}
                //     />
                // </div>
                // )
            }

        </div>
    )
}
export default UserList;

// "customerCrmId": "20160504020458953000", 
// "sex": 1, 
// "xcname": "高慧清", 
// "dwname": "王进福", 
// "mzcode": "160215111", 
// "age": 21, 
// "customerCrmName": "李甜"